<template>
  <div class="custom-btn" :class="{ active: active }" @click="emits('click')">
    <slot></slot>
  </div>
</template>

<script setup>
const emits = defineEmits(["click"]);

defineProps({
  active: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped>
.custom-btn {
  display: inline-block;
  cursor: pointer;
  background-image: linear-gradient(
    180deg,
    rgba(15, 74, 159, 0) 0%,
    rgba(17, 75, 160, 0.95) 100%
  );
  border: 1px solid rgba(26, 103, 186, 0.5);
  padding: 4px 7px;
  color: rgba(207, 233, 255, 0.5);
  font-size: 14px;
  line-height: 16px;
  &.active {
    color: #ffffff;
    border-color: #027bfd;
  }
}
.custom-btn + .custom-btn {
  margin-left: 8px;
}
</style>
